<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('新增排班管理')"/>
    <style>

        .mainBox {
            width: 90%;
            margin-top: 20px;
            position: absolute;
            top: 0px;
            left: 0px;
            bottom: 50px;
            overflow: auto;
        }

        .bottom {
            width: 100%;
            position: absolute;
            bottom: 0px;
            left: 0px;
            height: 50px;
            line-height: 50px;
            background-color: #F8F8F8;
            border-top: 1px solid #eee;
        }

        .button-container {
            position: absolute;
            right: 15px;
        }
        body{
            background-color: #fff;
        }
    </style>
</head>
<body>
<form class="layui-form">
    <div class="mainBox">
        <div class="main-container">

            <div class="layui-form-item">
                <label class="layui-form-label">单位</label>
                <div class="layui-input-block">
                    <input type="hidden" id="deptId">
                    <ul data-id="0" id="selectDept" name="deptId"></ul>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">班制类型</label>
                <div class="layui-input-block">
                    <select id="scheType" name="scheType"  lay-filter="scheType" >
                        <option value=""></option>
                        <option value="白班">白班</option>
                        <option value="夜班">夜班</option>
                        <option value="三一班">三一班</option>
                        <option value="三二班">三二班</option>
                        <option value="二一班">二一班</option>
                        <option value="二二班">二二班</option>
                        <option value="三三班">三三班</option>
                        <option value="四二班">四二班</option>
                        <option value="四三班">四三班</option>
                        <option value="不定时">不定时</option>
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">班制名称</label>
                <div class="layui-input-block">
                    <div class="layui-form" lay-filter="scheName">
                        <select name="scheName" id="scheName" lay-filter="scheName1">
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排班方式</label>
                <div class="layui-input-block">
                    <input checked lay-filter="type" name="sort" title="常白班" type="radio" value="0">
                    <input lay-filter="type" name="sort" title="规律倒班" type="radio" value="1">
                    <input lay-filter="type" name="sort" title="自由排班" type="radio" value="2">
                </div>
            </div>

            <div class="layui-form-item" id="stageItem">
                <label class="layui-form-label">班段</label>
                <div class="layui-input-block">
                    <div class="layui-form" lay-filter="scheStage">
                        <select name="scheStage" id="scheStage">
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" id="stageItem1" style="display: none">
                <label class="layui-form-label">班段</label>
                <div class="layui-input-block">
                    <input type="text" id="sortOldStage" name="sortOldStage" placeholder="1 第一班段、2 第二班段、3 第三班段"
                           class="layui-input" readonly />
                </div>
            </div>
            <div class="layui-form-item" id="lawItem" style="display: none">
                <label class="layui-form-label">倒班规律</label>
                <div class="layui-input-block">
                    <input type="text" id="remark" name="remark" placeholder="请输入倒班数字规律（0代表休息，1、2、3按顺序代表班段）"
                           class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">人员列表</label>
                <div class="layui-input-block">
                    <input type="hidden" id="userId" name="userId">
                    <input type="text" id="userName" name="userName" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">开始日期</label>
                <div class="layui-input-block">
                    <div class="input-group date">
                        <input type="text" name="day" class="layui-input"
                            id="day" >
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="bottom">
        <div class="button-container">
            <button type="submit" class="layui-btn layui-btn-primary layui-btn-sm" lay-submit="" lay-filter="sche-save">
                <i class="layui-icon layui-icon-ok"></i>
                提交
            </button>
            <button type="reset" class="layui-btn layui-btn-sm" id="formreset">
                <i class="layui-icon layui-icon-refresh"></i>
                重置
            </button>
        </div>
    </div>
</form>
</body>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">

    var _form;
    layui.use(['form', 'jquery', 'laydate', 'dtree'], function () {
        let form = layui.form;
        let $ = layui.jquery;
        let laydate = layui.laydate;
        let dtree = layui.dtree;
        
        let prefix = pName + "/kq/sche/"

        laydate.render({
            elem: '#day'
        });
        let initValue = common.currentUser().unitId;
        deptUtil.initUnitSelect("selectDept", "unitId","unitName", initValue, function (nodeId) {
            $('#deptId').val(nodeId)
        }, '考勤')
        $("#userName").on("click", function () {
            userUtil.initUserSelectMultiple("userId", "userName", "考勤")
        });

        form.on('select(scheType)', function (data) {
            let scheType = $('#scheType').val();
            let deptId = $('#deptId').val();

            $('#scheName').empty();
            $('#scheName').append(new Option("", ""));
            form.render("select", "scheName");

            if(scheType == '' || deptId == ''){
                return;
            }
            $.ajax({
                url: prefix + "scheNames",
                dataType: 'json',
                data: {"scheType": scheType, "unitId": deptId},
                type: 'get',
                success: function (result) {
                    if (result.code == 1) {
                        result.data.forEach(function (n) {
                            $('#scheName').append(new Option(n, n));
                        })
                        form.render("select", "scheName");
                    } else {
                            layer.alert(result.msg, {icon: 2});
                        }
                }
            })
        });
        form.on('select(scheName1)', function (data) {
            let scheType = $('#scheType').val();
            let scheName = data.value;
            let deptId = $('#deptId').val();

            $('#scheStage').empty();
            form.render("select", "scheStage");

            if(scheName == '' || scheType == '' || deptId == ''){
                return;
            }
            $.ajax({
                url: prefix + "scheStages",
                dataType: 'json',
                data: {"scheName":scheName,"scheType": scheType, "unitId": deptId},
                type: 'get',
                success: function (result) {
                    if (result.code == 1) {
                        let v = '0代表：休；';
                        let i = 1;
                        result.data.forEach(function (n) {
                            $('#scheStage').append(new Option(n, n));
                            v+= i + "代表："+ n+"；"
                            i++;
                        })
                        $('#sortOldStage').val(v.substr(0,v.length -1 ))
                        form.render("select", "scheStage");
                    } else {
                            layer.alert(result.msg, {icon: 2});
                        }
                }
            })
        });
        form.on("radio(type)", function () {
            if (this.value == '0') {
                $("#lawItem").hide();
                $("#stageItem").show();
                $("#stageItem1").hide();
            }else {
                $("#lawItem").show();
                $("#stageItem").hide();
                $("#stageItem1").show();
            }
        });
        form.on('submit(sche-save)', function (data) {
            let loading = layer.load();
            for (var key in data.field) {
                var type = $(data.form).find("input[name='" + key + "']").attr("type");
                if (type == "checkbox") {
                    var value = "";
                    $(data.form).find("input[name='" + key + "']:checked").each(function () {
                        value += $(this).val() + ",";
                    })
                    if (value != "") {
                        value = value.substr(0, value.length - 1);
                        data.field[key] = value;
                    }

                }
            }
            $.ajax({
                url: prefix + 'save',
                data: JSON.stringify(data.field),
                dataType: 'json',
                contentType: 'application/json',
                type: 'post',
                success: function (result) {
                    layer.close(loading);
                    if (result.code == 1) {
                        layer.msg(result.msg, {icon: 1, time: 1000}, function () {
                            parent.layer.close(parent.layer.getFrameIndex(window.name));
                            parent.layui.table.reload("sche-table");
                        });
                    } else {
                            layer.alert(result.msg, {icon: 2});
                        }
                }
            })
            return false;
        });
        $('#formreset').click(function(){
            $('#formId').find('input').val("")

            $('#scheName').empty();
            $('#scheStage').empty();
            _form.render("select");
        })
    });
</script>
</html>